import { AddNotice, EditNotice } from '@/components/DragModal/formdoms';
import Limit from '@/components/Limit';
import { doFetch, getFetch } from '@/utils/doFetch';
import { difftime } from '@/utils/time';
import { ProList } from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { message, Popconfirm, Space, Tabs, Tag, theme } from 'antd';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';

function Notice() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const actionRef = useRef();
  const [editable, setEditable] = useState(null);

  const { data, loading, refresh } = useRequest(
    async () => {
      let res = await getFetch({ url: '/announcement' });
      return res?.data?.page.records ?? [];
    },
    {
      debounceWait: 400,
      onSuccess: (res) => {
        setEditable(null);
      },
    },
  );

  return (
    <div>
      <Tabs
        items={[
          {
            key: 'announcement',
            label: '发布公告',
            children: (
              <div className='diywidth'>
           <AddNotice
                refresh={() => {
                  refresh();
                }}
              ></AddNotice>
              </div>

            ),
          },
          {
            key: 'history',
            label: '历史记录',
            children: (
              <ProList
                rowKey="id"
                itemCardProps={{
                  bordered: true,
                  hoverable: false,
                  style: { boxShadow: 'none' },
                }}
                actionRef={actionRef}
                request={async (params) => {
                  let res = await getFetch({ url: '/announcement' });
                  const { records, total, current } = res?.data?.page ?? {};
                  return {
                    data: records ?? [],
                    page: current,
                    success: true,
                    total: total ? parseInt(total) : 10,
                  };
                }}
                pagination={{
                  pageSize: 5,
                }}
                expandable={{
                  expandedRowRender: null,
                }}
                style={{
                  boxShadow: 'none',
                }}
                metas={{
                  title: {
                    dataIndex: 'createUserName',
                    render: (dom) => {
                      return <div style={{ width: 120 }}>{dom}</div>;
                    },
                  },
                  description: {
                    dataIndex: 'announcement',
                    render: (text, row) => {
                      return editable === row?.id ? (
                        <EditNotice
                          refresh={refresh}
                          announcement={row?.announcement}
                          id={row?.id}
                        />
                      ) : (
                        <Limit content={row?.announcement}></Limit>
                      );
                    },
                  },
                  subTitle: {
                    render: (_, row) => {
                      return (
                        <Space size={4}>
                          <Tag color="#5BD8A6">{difftime(dayjs(), dayjs(row?.createTime))}</Tag>
                          {editable === row?.id ? (
                            <Tag
                              color="#c2c2c2"
                              style={{ cursor: 'pointer', userSelect: 'none' }}
                              onClick={() => {
                                setEditable(null);
                              }}
                            >
                              取消
                            </Tag>
                          ) : (
                            <Tag
                              color="#13c2c2"
                              style={{ cursor: 'pointer', userSelect: 'none' }}
                              onClick={() => {
                                setEditable(row?.id);
                              }}
                            >
                              编辑
                            </Tag>
                          )}

                          <Popconfirm
                            title="是否删除该公告"
                            onConfirm={() => {
                              doFetch({
                                url: '/announcement/' + row.id,
                                params: {},
                                method: 'DELETE',
                              }).then((res) => {
                                if (res.code === 0) {
                                  message.success('删除成功');
                                  refresh();
                                }
                              });
                            }}
                          >
                            <Tag color="#ff4800" style={{ cursor: 'pointer', userSelect: 'none' }}>
                              删除
                            </Tag>
                          </Popconfirm>
                        </Space>
                      );
                    },
                  },
                }}
              />
            ),
          },
        ]}
      ></Tabs>
    </div>
  );
}

export default Notice;
